<script setup>
import { ref } from "vue";
import $bus from "../../utils/bus";
import { onMounted } from "vue";
import { getTreeApi, saveApi, getByIdApi, updateApi,delApi } from "@/api/sysMenu";
// ---------------------------------------------------------------------获取查询---------------------------------------------------------------------
const dataList = ref([]);
const selectedList = ref([])
const updateShow = ref(true)
const delShow = ref(true)
const getData = async () => {
  const res = await getTreeApi();
  dataList.value = res.data;
};
const getPage = () => {
  getData();
};
const clear = () => {
  getData()
};
const handleSelectionChange = (value) => {
  selectedList.value = value
  if(value.length==1){
    delShow.value = false
    updateShow.value = false
  }else if(value.length>1){
    updateShow.value = true
  }else{
    delShow.value = true
    updateShow.value = true
  }
}
// ---------------------------------------------------------------------添加修改---------------------------------------------------------------------
const open = ref(false)
const title = ref('弹出框dialog')
const formRef = ref(null)
const save = () => {
  open.value = true
  title.value = '添加菜单'
}
const form = ref({
  menuName: '',
  menuDes: '',
  menuLev: 1,
  menuSort: 0,
  menuShow: 0,
  menuIcon: '',
  menuRouterPath: '',
  menuType: 'GET',
  menuMappingPath: '',
  menuParentId: 0,
})
const formRule = ref({
  menuName: [
    { required: true, message: "不能为空", trigger: "blur" },
    { min: 2, max: 20, message: "长度为2到20", trigger: "blur" },
  ],
  menuDes: [
    { required: true, message: "不能为空", trigger: "blur" },
    { min: 2, max: 20, message: "长度为2到20", trigger: "blur" },
  ],
  menuLev: [
    { required: true, message: "不能为空", trigger: "blur" },
    { min: 1, max: 3, message: "只能添加一级二级三级菜单", trigger: "blur", type: "number" },
  ]
})
const options = ref([
  {
    value: 'GET',
    label: 'GET',
  },
  {
    value: 'DELETE',
    label: 'DELETE',
  },
  {
    value: 'POST',
    label: 'POST',
  },
  {
    value: 'PUT',
    label: 'PUT',
  }
])
const props = ref({
  checkStrictly: true,
  multiple: false, // 启用多选
  //  emitPath: false, // 只返回该节点的值
  value: "id", // 自定义当前数组的键名 - value
  label: "menuName", // 自定义当前数组的键名 - label
  children: "children", // 自定义当前数组的键名 - children
  //  expandTrigger: "click", // 次级菜单的展开方式 - click/hover
  //  lazy: "false", // 是否动态加载子节点，需与 lazyLoad 方法结合使用
  //  lazyLoad: "false", // 加载动态数据的方法，仅在 lazy 为 true 时有效
})
const colseReset = () => {
  form.value = {
    menuName: '',
    menuDes: '',
    menuLev: 1,
    menuSort: 0,
    menuShow: 0,
    menuIcon: '',
    menuRouterPath: '',
    menuType: 'GET',
    menuMappingPath: '',
    menuParentId: 0,
  }
}
const cascaderChange = (value) => {
  form.value.menuParentId = value[value.length - 1]
  form.value.menuLev = (value.length + 1)
}
const closeDialog = () => {
  open.value = false
  formRef.value.resetFields()
  colseReset()
}
const update = async (id) => {
  open.value = true
  title.value = '修改菜单'
  if(!id){
    id = selectedList.value[0].id
  }
  const res = await getByIdApi(id)
  form.value = res.data
}
const submit = () => {
  if (form.value.id) {
    formRef.value.validate(async (valid) => {
      if (!valid) {
        return
      }
      const res = await updateApi(form.value)
      ElMessage({
        message: res.data,
        type: "success",
      });
      getData()
      closeDialog()
    })
  } else {
    formRef.value.validate(async (valid) => {
      if (!valid) {
        return
      }
      const res = await saveApi(form.value)
      ElMessage({
        message: res.data,
        type: "success",
      });
      getData()
      closeDialog()
    })
  }
}
// ---------------------------------------------------------------------删除--------------------------------------------------------------------
const del = (id) => {
  if(!id){
    id = selectedList.value.map(item => item.id)
  }
  // console.log(id)
  ElMessageBox.confirm('确认删除？', '删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const res = await delApi(id)
    ElMessage({
      type: 'success',
      message: res.data,
    })
    getData()
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    })
  })
}
//---------------------------------------------------------------------获取标题事件---------------------------------------------------------------------
const titleData = ref({
  titleFir: "系统管理",
  titleSec: "菜单管理",
});

onMounted(() => {
  $bus.emit("title-info", titleData.value);
  getData();
});
</script>
<template>

  <el-card>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-button icon="Search" type="primary" @click="getPage()">查询</el-button>
        <el-button icon="RefreshRight" type="info" @click="clear()">重置</el-button>
      </el-form-item>
      <br/>
      <!-- <el-divider border-style="dashed"/> -->
      <el-form-item>
        <el-button icon="Plus" plain type="warning" @click="save()">添加</el-button>
        <el-button icon="Edit" plain :disabled="updateShow" type="success" @click="update()">修改</el-button>
        <el-button icon="Delete" plain :disabled="delShow" type="danger" @click="del()">删除</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <el-card>
    <el-table :data="dataList" @selection-change="handleSelectionChange" stripe fit default-expand-all row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" scrollbar-tabindex>

      <el-table-column type="selection" width="55" align="center" />

      <el-table-column width="55" type="index" label="序号"></el-table-column>
      <el-table-column width="200" label="菜单名称" prop="menuName"></el-table-column>
      <el-table-column width="200" label="菜单描述" prop="menuDes"></el-table-column>
      <el-table-column width="80" label="菜单等级" prop="menuLev"></el-table-column>
      <el-table-column width="80" label="菜单排序" prop="menuSort"></el-table-column>
      <el-table-column width="80" label="菜单展示" prop="menuShow">
        <template #default="data">
          <!-- <span>{{ data.row }}</span> -->
          <el-tag v-if="data.row.menuShow === 1" type="success">展示</el-tag>
          <el-tag v-else type="info">隐藏</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="100" label="菜单图片" prop="menuIcon"></el-table-column>
      <el-table-column width="120" label="路由映射路径" prop="menuRouterPath"></el-table-column>
      <el-table-column width="80" label="请求类型" prop="menuType">
        <template #default="data">
          <!-- <span>{{ data.row }}</span> -->
          <el-tag v-if="data.row.menuType === 'GET'" type="info">GET</el-tag>
          <el-tag v-else-if="data.row.menuType === 'DELETE'" type="danger">DEL</el-tag>
          <el-tag v-else-if="data.row.menuType === 'POST'" type="primary">POST</el-tag>
          <el-tag v-else-if="data.row.menuType === 'PUT'" type="warning">PUT</el-tag>
        </template>
      </el-table-column>
      <el-table-column  label="方法映射路径" prop="menuMappingPath"></el-table-column>
      <el-table-column fixed="right" width="150" label="操作">
        <template #default="data">
          <el-button icon="Edit" link type="success" size="small" @click="update(data.row.id)">修改</el-button>
          <el-button icon="Delete" link type="danger" size="small" @click="del(data.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-dialog v-model="open" :title="title" width="50%" :before-close="closeDialog" draggable>
    <el-form :model="form" label-width="auto" :rules="formRule" ref="formRef">
      <el-form-item label="菜单名称" prop="menuName">
        <el-input v-model="form.menuName" />
      </el-form-item>
      <el-form-item label="菜单描述" prop="menuDes">
        <el-input v-model="form.menuDes" />
      </el-form-item>
      <el-form-item label="菜单排序">
        <el-input v-model="form.menuSort" type="number" />
      </el-form-item>
      <el-form-item label="菜单图片">
        <el-input v-model="form.menuIcon" />
      </el-form-item>
      <el-form-item label="菜单展示">
        <!-- <el-input v-model="editForm.menuShow" /> -->
        <el-switch :disabled="false" class="specific-switch" :active-value="1" :inactive-value="0" v-model="form.menuShow"
          :value="form.menuShow" size="large" />
      </el-form-item>
      <el-form-item label="路由映射路径">
        <el-input v-model="form.menuRouterPath" />
      </el-form-item>
      <el-form-item label="菜单类型">
        <!-- <el-input v-model="addForm.menuType" /> -->
        <el-select v-model="form.menuType" placeholder="菜单类型" size="large" style="width: 240px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="方法映射路径">
        <el-input v-model="form.menuMappingPath" />
      </el-form-item>
      <el-form-item label="上级菜单">
        <el-cascader v-model="form.menuParentId" placeholder="请输入上层权限" :options="dataList" :props="props"
          @change="cascaderChange" />
      </el-form-item>
      <el-form-item label="菜单等级" prop="menuLev">
        <el-input v-model="form.menuLev" disabled />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog()">取消</el-button>
        <el-button type="primary" @click="submit()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
